<template>
  <Manage>
    <template #upCard>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="取件任务编号">
              <el-input v-model="page.id" placeholder="请输入取件任务编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input v-model="page.id" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属营业部">
              <Treeselect
                v-model="page.agencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择所属营业部"
                :append-to-body="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计完成时间">
              <el-date-picker
                v-model="estimatedEndTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
                style="width:100%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际完成时间">
              <el-date-picker
                v-model="actualEndTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
                style="width:100%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务分配状态">
              <el-select v-model="page.assignedStatus" placeholder="请选择任务分配状态" style="width:100%" clearable>
                <el-option label="已分配" :value="2" />
                <el-option label="待人工分配" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #midCard>
      <TabChange :tabs="setMap.pickUpTabs" @changeItem="changeItem" />
    </template>
    <template #downCard>
      <el-button type="primary" style="margin-bottom:24px" @click="distribute">人工分配</el-button>
      <el-table
        v-loading="loading"
        :data="PickUpTaskData"
        stripe
        :header-cell-style="{background:'#f8faff',color:'#818693'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="(row)=>row.assignedStatus===3" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="取件作业编号" />
        <el-table-column prop="agencyName" label="所在营业部" />
        <el-table-column label="任务分配状态">
          <template #default="{row}">
            <span>{{ row.assignedStatus===2?'已分配':'待人工分配' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="courierName" label="快递员姓名" />
        <el-table-column prop="orderId" label="订单编号" />
        <el-table-column prop="estimatedStartTime" label="预计开始时间" />
        <el-table-column prop="estimatedEndTime" label="预计完成时间" />
        <el-table-column prop="actualEndTime" label="实际完成时间" />

      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </template>
  </Manage>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
import setMap from '@/constant/setMap'
import { getPickUpTask } from '@/api/transport'
export default {
  filters: {
    showTransportTaskStatus(val) {
      return setMap.transportTaskStatus.find(item => item.id === val)?.item || ''
    }
  },
  data() {
    return {
      setMap,
      estimatedEndTime: [],
      actualEndTime: [],
      page: {
        page: 1,
        pageSize: 10,
        id: null,
        orderId: null,
        agencyId: null,
        minEstimatedEndTime: null,
        maxEstimatedEndTime: null,
        minActualEndTime: null,
        maxActualEndTime: null,
        taskType: 1
      },
      status: null,
      counts: 0,
      tree: [],
      PickUpTaskData: [],
      loading: false,
      selection: []
    }
  },
  created() {
    this.initTree()
    this.initPickUpTask()
  },
  methods: {
    // 运输任务表格
    async initPickUpTask() {
      this.loading = true
      try {
        this.page.minEstimatedEndTime = this.estimatedEndTime[0]
        this.page.maxEstimatedEndTime = this.estimatedEndTime[1]
        this.page.minActualEndTime = this.actualEndTime[0]
        this.page.maxActualEndTime = this.actualEndTime[1]
        const res = await getPickUpTask({ ...this.page, status: this.status })
        this.PickUpTaskData = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 搜索
    search() {
      this.initPickUpTask()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initPickUpTask()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initPickUpTask()
    },
    reset() {
      this.estimatedEndTime = []
      this.actualEndTime = []
      this.page = {
        page: 1,
        pageSize: 10,
        id: null,
        orderId: null,
        agencyId: null,
        minEstimatedEndTime: null,
        maxEstimatedEndTime: null,
        minActualEndTime: null,
        maxActualEndTime: null,
        taskType: 1
      }
      this.initPickUpTask()
    },
    // 切换
    changeItem(id) {
      this.status = id
      this.initPickUpTask()
    },
    // 选中行
    handleSelectionChange(val) {
      this.selection = val.map(item => item.id)
    },
    // 人工分配
    distribute() {
      if (!this.selection.length) return this.$message.error('选择要分配的作业')
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
